<template>
    <!--  贴吧分类 首页面  显示当前非分类下的贴吧-->
    <div>
        <!--顶部导航栏-->
        <el-row>
            <el-col>
                <topNav></topNav>
            </el-col>
        </el-row>

        <!--搜索框-->
        <el-row type="flex" justify="center">
            <el-col :span="18">
                <searchBar></searchBar>
            </el-col>
        </el-row>

        <!--页面主体内容-->
        <el-row type="flex" justify="center">
            <!--左边分类列表-->
            <el-col :span="4" class="">
                <div class="clap_bg"></div>
                <!--已有的分类的列表  通过v-bind 传递参数，高亮当前打开的分类-->
                <div class="border font ctg_list">
                    <ctgList v-bind:ctgIdToShow="ctgId" @setCtgName="setCtgName"></ctgList>
                </div>
            </el-col>

            <!--右边 banner 、 贴吧列表等-->
            <el-col :span="14" class="">
                <!--图片banner-->
                <el-row>
                    <el-col>
                        <div class="top_banner gray_border"></div>
                    </el-col>
                </el-row>
                <!--分类标题-->
                <h1>{{ctgName}}</h1>
                <el-divider content-position="right">那个夏天</el-divider>
                <!--贴吧列表-->
                <div class="bg_color_shallow_blue gray_border bar_list">
                    <!--结果记录数说明 + 排序方法下拉框-->
                    <el-row type="flex" class="font line_height_35  padding_top_15" justify="space-between">
                        <el-col :span="9" class="padding_left_10">共 {{totalRs}} 个贴吧：</el-col>
                        <el-col :span="7">
                            <span>排序: </span>
                            <!--排序方式下拉框-->
                            <el-select v-model="sortType" placeholder="请选择" size="small" value="" @change="changeOption">
                                <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-col>
                    </el-row>

                    <!--贴吧列表-->
                    <el-row type="flex" justify="center" class="padding_top_15">
                        <el-col :span="22">
                            <barList ref="ctgBarList" @setTotal="setTotalRs"></barList>
                            <br><br><br><br><br>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
        </el-row>

        <!--底部版权-->
        <footer>
            <copyRight></copyRight>
        </footer>

        <!--返回顶部   这里不传target的值（根据他源码是可以这么做，可以直接用的，虽然我看不大懂）  target要设置的化是外部容器，而且要有一定的css样式，可以看我edge收藏夹-->
        <el-backtop></el-backtop>
    </div>
</template>

<script>
    import barList from "@/components/component/barList";
    import categoryList from "@/components/component/categoryList";
    import navigateBar from "@/components/component/navigateBar";
    import searchBar from "@/components/component/searchBar";
    import btmCopyRight from "@/components/component/btmCopyRight";

    export default {
        name: "categoryPage",
        data(){
            return{
                ctgId: 1, // 当前分类id
                ctgName: '', // 当前贴吧分类 名称
                totalRs: 0, // 结果（贴吧）总的条目数
                // 排序方式下拉框数组
                options: [{value: 'peopleNum', label: '加入人数最多'}, {value: 'postsNum', label: '贴吧帖数最多'}],
                sortType: "postsNum", // 默认按照 贴吧总帖子数 由多到少排序
            }
        },
        created(){
            // 接收参数 （分类id）
            this.ctgId = this.$route.query.ctgId;

        },
        mounted(){
            /*初始化贴吧列表*/
            this.$refs.ctgBarList.init(0, this.ctgId, null, null, "postsNum"); // 先默认 按照帖子数量倒序排序
        },
        methods:{
            // 设置 结果总条目数
            setTotalRs(total){
                this.totalRs = total;
            },

            // 设置 结果总条目数
            setCtgName(name){
                this.ctgName = name;
            },

            // 排序方式下拉框 改变时触发的钩子函数
            // 参数为： 目前的选中值 option对应的value
            changeOption(current){
                console.log("当前选中：" + current);

                // 更改贴吧排序方式
                this.$refs.ctgBarList.init(0, this.ctgId, null, null, current);
            },
        },
        components:{
            "barList": barList, /*贴吧列表*/
            "ctgList": categoryList,   /*目前已有的贴吧分类  列表*/
            "topNav": navigateBar, /*顶部导航栏*/
            "searchBar": searchBar, /*上方搜索 栏*/
            "copyRight": btmCopyRight,  /*底部版权*/
        }
    }
</script>

<style scoped>
    /*当前分类名称*/
    h1{
        font-size: 20px;
        color: #197FCD;
        margin-top: 13px;
        padding-left: 10px;
    }

    /*顶部 banner div*/
    .top_banner{
        height: 280px;
        background-image: url("../../assets/images/ctgIndexBanner.jpg");
        background-position: -260px -65px;
        border-radius: 5px;
    }

    /*左上方 白人鼓掌 bg div*/
    .clap_bg{
        height: 190px;
        background-repeat: no-repeat;
        background-image: url("../../assets/images/clap.png");
        background-position: 9px 65px;
    }

    /*贴吧列表div （包括 共xx条记录   排序方式下拉框等）*/
    .bar_list{
        border-radius: 7px 7px 0 0;
        min-height: 492px;  /* 由于 目前贴吧较少 设置最小高度 和左边的贴吧分类对齐 */
    }

    /*左边的 分类列表*/
    .ctg_list{
        margin-top: 20px;
        padding-left: 20px;
        padding-bottom: 290px;
        border: 1px solid #DCDCDC;
        background-color: #F5F8FA;
        margin-right: 30px;
        border-radius: 10px
    }

</style>